import * as API from '@/services';
import {
  KfBackendEnumPicker,
  DEFAULT_FORM_LAYOUT,
  KfBizQuickFormProps,
  KfFloatingContextProps,
  KfInput,
  KfQuickForm,
  KfTextArea,
  useBackendEnum,
  KfModal,
} from 'kf-web-library';
import { Button, Descriptions, Divider, Form, message, Space, Table } from 'antd';
import React, { FunctionComponent, useMemo } from 'react';
import { useRequest } from 'umi';
import numeral from 'numeral';
import { unsubscribeJournal } from '@/services';

const FormItem = Form.Item;
type QueryEntity = API.JournalSubscribe;
type CreateEntity = API.JournalSubscribe_Create;
type ModifyEntity = API.JournalSubscribe_Modify;

type DataFormProps = {} & KfBizQuickFormProps & KfFloatingContextProps;

/**
 * 订阅记录 表单
 */
const QuickForm: FunctionComponent<DataFormProps> = (props) => {
  const { formType, bizId, ...rest } = props;
  const { enumDict, enumTypeDict, getBackendEnum } = useBackendEnum();
  const dataReq = useRequest(() => API.queryJournalSubscribe(bizId!));

  const record = dataReq.data;
  const totalPrice = record?.order?.totalPrice || 0;
  const periodDescription = `共订阅${record?.order?.periodCount}期，已交付${record?.order?.periodCount}期`;

  //是否允许退订(退款)
  const allowUnsubscribe = useMemo(() => {
    if (record?.timeType !== 'FUTURE') {
      return false;
    }
    if (record?.order?.status !== 'PAID') {
      return false;
    }
    if (record.periodCount >= record?.shippingCount) {
      return false;
    }
    return true;
  }, [record]);

  return (
    <div className={'journal-subscribe-record-detail-container'}>
      <Space direction={'vertical'} size={16} style={{ width: '100%' }}>
        <Descriptions title="订阅用户" bordered={true} column={3} size={'small'} styles={{ label: { width: 100 } }}>
          <Descriptions.Item label="用户" styles={{ content: { width: 200 } }}>
            {record?.user?.nickname}
          </Descriptions.Item>
          <Descriptions.Item label="手机号">{record?.user?.phone}</Descriptions.Item>
          <Descriptions.Item label="邮箱">{record?.user?.email}</Descriptions.Item>
        </Descriptions>
        <Descriptions title="订单摘要" bordered={true} column={2} size={'small'} styles={{ label: { width: 100 } }}>
          <Descriptions.Item label="订单编号" span={2}>
            {record?.order?.orderNo}
          </Descriptions.Item>
          <Descriptions.Item label="交易流水号" span={2}>
            {record?.order?.paymentTransactionId}
          </Descriptions.Item>
          <Descriptions.Item label="支付金额" styles={{ content: { width: 200 } }}>
            ￥{numeral(totalPrice / 100).format('0.00')}
          </Descriptions.Item>
          <Descriptions.Item label="支付状态">{getBackendEnum('PayOrderStatus', record?.order?.status)?.i18EnumDesc}</Descriptions.Item>
          <Descriptions.Item label="付款方式" span={2}>
            {getBackendEnum('PaymentMethod', record?.order?.paymentMethod)?.i18EnumDesc}
          </Descriptions.Item>
          <Descriptions.Item label="支付时间" span={2}>
            {record?.order?.paymentTime}
          </Descriptions.Item>
        </Descriptions>
        <Descriptions title="订阅信息" bordered={true} column={2} size={'small'} styles={{ label: { width: 100 } }}>
          <Descriptions.Item label="订阅日期" span={2}>
            {record?.subscribeDate}
          </Descriptions.Item>

          <Descriptions.Item label="订阅载体" styles={{ content: { width: 200 } }}>
            {getBackendEnum('SubscribeDisplayType', record?.order?.displayType)?.i18EnumDesc}
          </Descriptions.Item>
          <Descriptions.Item label="订阅刊时">{getBackendEnum('SubscribeTimeType', record?.order?.timeType)?.i18EnumDesc}</Descriptions.Item>
          <Descriptions.Item label="订阅期刊" span={2}>
            {record?.journal?.journalNameCn}
          </Descriptions.Item>
          <Descriptions.Item label="订阅刊期" span={2}>
            <div>{periodDescription}</div>
            <div>
              <div>
                <Table
                  style={{ width: '100%', marginTop: 12 }}
                  bordered={true}
                  pagination={false}
                  size={'small'}
                  columns={[
                    {
                      title: '年',
                      width: 100,
                      dataIndex: 'year',
                    },
                    {
                      title: '卷',
                      width: 100,
                      dataIndex: 'volume',
                    },
                    {
                      title: '期',
                      dataIndex: 'period',
                    },
                    {
                      title: '操作',
                      width: 200,
                      dataIndex: 'option',
                      render: (_, record) => {
                        return (
                          <Space size={0} split={<Divider type="vertical" />} className={'subscription-select-item-action-space'}>
                            <a onClick={() => {}}>重发</a>
                          </Space>
                        );
                      },
                    },
                  ]}
                  dataSource={record?.periodList || []}
                />
              </div>
            </div>
          </Descriptions.Item>
        </Descriptions>
      </Space>
      <div style={{ marginTop: 48 }}>
        <Space>
          {allowUnsubscribe && (
            <Button
              type="primary"
              onClick={() => {
                KfModal.confirm2(
                  '取消订阅',
                  '您确定要取消订阅并发起退款吗？ ',
                  () => {
                    unsubscribeJournal(record!.id).then((resp) => {
                      if (resp.flag) {
                        message.success('取消订阅成功');
                        dataReq.refresh();
                      }
                    });
                  },
                  () => {},
                  {
                    okText: '确定',
                    cancelText: '放弃',
                  },
                );
              }}
            >
              取消订阅
            </Button>
          )}
        </Space>
      </div>
    </div>
  );
};

export default QuickForm;
